<template>

    <el-dialog v-model='state.isShow' title='用户选择' width='850px' draggable>
      <div class="sys-user-container">
        <el-row :gutter="8" style="width: 100%">
          <el-col :span="6" :xs="24">
            <OrgTree ref="orgTreeRef" @node-click="nodeClick" />
          </el-col>
    
          <el-col :span="18" :xs="24">
            <el-card shadow="hover" :body-style="{ paddingBottom: '0' }">
              <el-form :model="state.queryParams" ref="queryForm" :inline="true">
                <el-row :gutter="35">
                  <el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="8">
                    <el-form-item label="账号" prop="account">
                      <el-input
                        placeholder="账号"
                        clearable
                        @keyup.enter="handleQuery"
                        v-model="state.queryParams.account"
                      />
                    </el-form-item>
                  </el-col>
                  <!-- <el-form-item label="姓名" prop="realName">
                                <el-input placeholder="姓名" clearable @keyup.enter="handleQuery" v-model="queryParams.realName" />
                            </el-form-item> -->
                  <el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="8">
                    <el-form-item label="手机号码" prop="phone">
                      <el-input
                        placeholder="手机号码"
                        clearable
                        @keyup.enter="handleQuery"
                        v-model="state.queryParams.phone"
                      />
                    </el-form-item>
                  </el-col>
                  <el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="8" class="mb20 search-actions">
                  
                      <el-form-item>
                       
                        <el-button type="primary" icon="ele-Search" @click="handleQuery" v-auth="'sysUser:page'" plain > 查询 </el-button>
                      </el-form-item>
                
                  </el-col>
                </el-row>
              </el-form>
            </el-card>
    
            <el-card shadow="hover" style="margin-top: 8px">
              <el-table
                :data="state.userData"
                style="width: 100%"
                v-loading="state.loading"
                border
              >
                <el-table-column type="index" label="序号" width="55" align="center" fixed />
                <el-table-column
                  prop="account"
                  label="账号"
                  width="120"
                  fixed
                  show-overflow-tooltip
                />
                <el-table-column
                  prop="nickName"
                  label="昵称"
                  width="120"
                  show-overflow-tooltip
                />
                <el-table-column label="头像" width="80" align="center" show-overflow-tooltip>
                  <template #default="scope">
                    <el-avatar src="" size="small"
                      >{{ scope.row.nickName?.slice(0, 1) }}
                    </el-avatar>
                  </template>
                </el-table-column>
                <el-table-column
                  prop="realName"
                  label="姓名"
                  width="120"
                  show-overflow-tooltip
                />
                <el-table-column
                  label="出生日期"
                  width="100"
                  align="center"
                  show-overflow-tooltip
                >
                  <template #default="scope">
                    {{ formatDate(new Date(scope.row.birthday), "YYYY-mm-dd") }}
                  </template>
                </el-table-column>
                <el-table-column label="性别" width="70" align="center" show-overflow-tooltip>
                  <template #default="scope">
                    <el-tag type="success" v-if="scope.row.sex === 1"> 男 </el-tag>
                    <el-tag type="danger" v-else> 女 </el-tag>
                  </template>
                </el-table-column>
                <el-table-column
                  prop="phone"
                  label="手机号码"
                  width="120"
                  align="center"
                  show-overflow-tooltip
                />
                <el-table-column label="状态" width="70" align="center" show-overflow-tooltip>
                  <template #default="scope">
                    <el-switch
                      v-model="scope.row.status"
                      :active-value="1"
                      :inactive-value="2"
                      size="small"
                      readonly
                      v-auth="'sysUser:setStatus'"
                    />
                  </template>
                </el-table-column>
                <el-table-column
                  prop="orderNo"
                  label="排序"
                  width="70"
                  align="center"
                  show-overflow-tooltip
                />
                <el-table-column
                  prop="createTime"
                  label="修改时间"
                  width="160"
                  show-overflow-tooltip
                />
                <el-table-column prop="remark" label="备注" show-overflow-tooltip />
                <el-table-column
                  label="操作"
                  width="110"
                  align="center"
                  fixed="right"
                  show-overflow-tooltip
                >
                  <template #default="scope">
                    <el-button
                      icon="ele-Edit"
                      size="small"
                      text
                      type="primary"
                      @click="closeModal(scope.row)"
                      v-auth="'sysUser:update'"
                    >
                      选择
                    </el-button>
                   
                  </template>
                </el-table-column>
              </el-table>
              <el-pagination
                v-model:currentPage="state.tableParams.page"
                v-model:page-size="state.tableParams.pageSize"
                :total="state.tableParams.total"
                :page-sizes="[10, 20, 50, 100]"
                small
                background
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                layout="total, sizes, prev, pager, next, jumper"
              />
            </el-card>
          </el-col>
        </el-row>
      
      </div>
    
      <template #footer>
          <span class='dialog-footer'>
            <el-button type='primary' @click='closeModal'>确认</el-button>
            <el-button @click='state.isShow = false'>取消</el-button>
          </span>
                </template>
  </el-dialog>
    </template>
    
    <script lang="ts" setup name="sysUser">
    import { onMounted, onUnmounted, reactive, ref } from "vue";
    import { ElMessageBox, ElMessage } from "element-plus";
    import { formatDate } from "/@/utils/formatTime";
    import { auth } from "/@/utils/authFunction";
    import mittBus from "/@/utils/mitt";
    import OrgTree from "/@/views/system/org/component/orgTree.vue";
    import EditUser from "/@/views/system/user/component/editUser.vue";
    
    import { getAPI } from "/@/utils/axios-utils";
    import { SysUserApi, SysOrgApi } from "/@/api-services/api";
    import { SysUser, SysOrg } from "/@/api-services/models";
    
    const orgTreeRef = ref<InstanceType<typeof OrgTree>>();
    const editUserRef = ref<InstanceType<typeof EditUser>>();
    const state = reactive({
      isShow:false,
      loading: false,
      userData: [] as Array<SysUser>,
      orgTreeData: [] as Array<SysOrg>,
      queryParams: {
        orgId: -1,
        account: undefined,
        realName: undefined,
        phone: undefined,
      },
      tableParams: {
        page: 1,
        pageSize: 10,
        total: 0 as any,
      },
      editUserTitle: "",
    });

   
    
    onMounted(async () => {
      loadOrgData();
      handleQuery();
    
      mittBus.on("submitRefresh", () => {
        handleQuery();
      });
    });
    
    onUnmounted(() => {
      mittBus.off("submitRefresh");
    });
    
    // 查询机构数据
    const loadOrgData = async () => {
      state.loading = true;
      var res = await getAPI(SysOrgApi).apiSysOrgListGet(0);
      state.orgTreeData = res.data.result ?? [];
      state.loading = false;
    };
    
    // 查询操作
    const handleQuery = async () => {
      state.loading = true;
      var res = await getAPI(SysUserApi).apiSysUserPageGet(
        state.queryParams.account,
        state.queryParams.realName,
        state.queryParams.phone,
        state.queryParams.orgId,
        state.tableParams.page,
        state.tableParams.pageSize
      );
      state.userData = res.data.result?.items ?? [];
      state.tableParams.total = res.data.result?.total;
      state.loading = false;
    };
    
    // 重置操作
    const resetQuery = () => {
      state.queryParams.orgId = -1;
      state.queryParams.account = undefined;
      state.queryParams.realName = undefined;
      state.queryParams.phone = undefined;
      handleQuery();
    };
    
  
    
    
    // 改变页面容量
    const handleSizeChange = (val: number) => {
      state.tableParams.pageSize = val;
      handleQuery();
    };
    
    // 改变页码序号
    const handleCurrentChange = (val: number) => {
      state.tableParams.page = val;
      handleQuery();
    };
    
   
    
  
    
    // 树组件点击
    const nodeClick = async (node: any) => {
      state.queryParams.orgId = node.id;
      state.queryParams.account = undefined;
      state.queryParams.realName = undefined;
      state.queryParams.phone = undefined;
      handleQuery();
    };

    const open = async () => {
	// console.log(shape.businessObject.$attrs);
	state.isShow = true;
};

defineExpose({ open });
    const emits = defineEmits(['close']);
    const closeModal = (row) => {
	const backData = row;
	
	emits('close', backData);
	state.isShow = false;
};
    </script>
    